import snapShotImg from "@/assets/snapshot.jpeg";
import { Button, Form, Image } from "antd";
import { useEffect, useState } from "react";
import { useModel } from "umi";
const { ipcRenderer } = window.require("electron");
const { fs } = window.require("fs");
const { join } = window.require("path");

const FormItem = Form.Item;

const SnapShot = () => {
  const {
    snapShotName,
    setSnapShotName,
    getSnapShotName,
    localPath,
    setLocalPath,
  } = useModel("snapShot");
  const [test, setTest] = useState<string>();
  const [taskName, setTaskName] = useState<string>();
  const testType = "KPI";
  const {
    deviceList,
    getDeviceList,
    getDeviceInfo,
    deviceInfo,
    setDeviceInfo,
  } = useModel("device");
  console.log("localPath,snapShotName" + localPath, snapShotName);
  useEffect(() => {
    if (deviceInfo?.SN) {
      getDeviceInfo(deviceInfo?.SN).then((res) => {
        setDeviceInfo(res);
      });
    }
  }, [deviceInfo?.SN]);
  useEffect(() => {
    if (deviceInfo?.SN) {
      ipcRenderer
        .invoke("taskNameGenerator", deviceInfo?.SN, testType)
        .then((taskName1: string) => {
          setTaskName(taskName1);
        });
    }
  }, [deviceInfo, testType]);
  useEffect(() => {
    const snapShotFilepath = join(
      localPath || "",
      snapShotName + ".jpeg" || ""
    );
    setTest(snapShotFilepath);
  }, [localPath, snapShotName, deviceInfo?.SN]);
  return (
    <>
      <FormItem label="设备截图">
        <Button
          onClick={() => {
            if (deviceInfo?.SN) {
              getSnapShotName(
                taskName || "",
                //deviceInfo?.SN,
                //deviceInfo?.OS,
                testType
              );
            }
          }}
          type="primary"
        >
          snapShot
        </Button>
      </FormItem>
      <Image.PreviewGroup>
        <Image width={220} height={500} src={test} fallback={snapShotImg} />
      </Image.PreviewGroup>
    </>
  );
};

export default SnapShot;
